<template>
    <el-row class="lives-news">
        <el-row class="title">
            <h3>店铺详情</h3>
        </el-row>
        <el-row>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" icon="arrow-left" @click="back">返回列表</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row v-if="shop">
            <h3 v-if="shop.shopAuditInformation">审核信息</h3>
            <el-form label-width="160px" v-if="shop.shopAuditInformation">
                <el-form-item label="基本信息审核状态：" class="label">{{formatAuditStatus(shop.shopAuditInformation.base)}}</el-form-item>
                <el-form-item label="配送信息审核状态：" class="label">{{formatAuditStatus(shop.shopAuditInformation.delivery)}}</el-form-item>
                <el-form-item label="纸质信息审核状态：" class="label">{{formatAuditStatus(shop.shopAuditInformation.qualification)}}</el-form-item>
                <el-form-item label="结算信息审核状态：" class="label">{{formatAuditStatus(shop.shopAuditInformation.settlement)}}</el-form-item>
            </el-form>
            <h3>店铺基本信息</h3>
            <el-form label-width="160px">
                <el-form-item label="店铺ID：" class="label">{{shop.detail.shopId}}</el-form-item>
                <el-form-item label="店铺名称：" class="label">{{shop.detail.shopName}}</el-form-item>
                <el-form-item label="店铺类型：" class="label">{{formatShopType(shop.detail.shopType)}}</el-form-item>
                <el-form-item label="店铺地址：" class="label">{{shop.detail.address}}</el-form-item>
                <el-form-item label="营业时间：" class="label">{{shop.detail.busBeginTime}}-{{shop.detail.busEndTime}}</el-form-item>
                <el-form-item label="配送费：" class="label">{{shop.detail.fee}}元</el-form-item>
                <el-form-item label="送餐电话：" class="label">{{shop.detail.takeOutPhone}}</el-form-item>
                <el-form-item label="店铺上架状态：" class="label">{{shop.detail.shelves?'上架':'下架'}}</el-form-item>
                <el-form-item label="店铺注册手机号：" class="label">{{shop.detail.phoneNum}}</el-form-item>
                <el-form-item label="店铺联系人：" class="label">{{shop.detail.name}}</el-form-item>
                <el-form-item label="店铺分类：" class="label">
                    <span v-for="(item,index) in shop.categoryNames" :key="index">{{item}}</span>
                </el-form-item>
                <el-form-item label="店铺logo：" class="label"><img :src="UPLOADURL+ shop.detail.logoUrl" alt=""></el-form-item>
                <el-form-item label="店内照：" class="label"><img :src="formatImage(shop.detail.shopInnerUrl)" alt=""></el-form-item>
                <el-form-item label="店铺门脸照：" class="label"><img :src="formatImage(shop.detail.shopFaceUrl)" alt=""></el-form-item>
                <el-form-item label="店铺位置图：">
                    <div class="amap-container" v-if="shop">
                        <el-amap ref="amap" vid="amapDemo" class="amap" :zoom="zoom" :center="mapCenter">
                            <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :title="marker.title"></el-amap-marker>
                        </el-amap>
                    </div>
                </el-form-item>
            </el-form>
            <h3 v-if="shop.document || shop.subject || shop.industry">资质信息</h3>
            <h4 v-if="shop.document">证件信息</h4>
            <el-form label-width="160px" v-if="shop.document">
                <el-form-item label="证件类型：" class="label">{{formatDocumentType(shop.document.documentType)}}</el-form-item>
                <el-form-item label="证件号码：" class="label">{{shop.document.documentNum}}</el-form-item>
                <el-form-item label="证件正面照：" class="label"><img :src="formatImage(shop.document.fullFacePhotoUrl)" alt=""></el-form-item>
                <el-form-item label="证件手持正面照：" class="label"><img :src="formatImage(shop.document.handFullFacePhotoUrl)" alt=""></el-form-item>
                <el-form-item label="证件反面照：" class="label"><img :src="formatImage(shop.document.reverseSideAsUrl)" alt=""></el-form-item>
            </el-form>
            <h4 v-if="shop.subject">主体资质</h4>
            <el-form label-width="160px" v-if="shop.subject">
                <el-form-item label="主体资质类型：" class="label">{{formatSubjectDocument(shop.subject.subjectDocument)}}</el-form-item>
                <el-form-item label="主体资质有效期：" class="label">{{shop.subject.longTerm ? '长期' : (moment(shop.subject.beginTime).format("YYYY-MM-DD") + '至' + moment(shop.subject.endTime).format("YYYY-MM-DD"))}}</el-form-item>
                <el-form-item label="资质照片：" class="label"><img :src="formatImage(shop.subject.businessUrl)" alt=""></el-form-item>
                <el-form-item label="法定代表人 ：" class="label">{{shop.subject.legal}}</el-form-item>
                <el-form-item label="注册地址：" class="label">{{shop.subject.regAddress}}</el-form-item>
                <el-form-item label="注册号：" class="label">{{shop.subject.regNumber}}</el-form-item>
                <el-form-item label="单位名称：" class="label">{{shop.subject.unitName}}</el-form-item>
            </el-form>
            <h4 v-if="shop.industry">行业资质</h4>
            <el-form label-width="160px" v-if="shop.industry">
                <el-form-item label="资质类型：" class="label">{{formatIntelligence(shop.industry.intelligence)}}</el-form-item>
                <el-form-item label="许可证有效期：" class="label">{{shop.industry.longTerm ? '长期' : (moment(shop.industry.beginTime).format("YYYY-MM-DD") + '至' + moment(shop.industry.endTime).format("YYYY-MM-DD"))}}</el-form-item>
                <el-form-item label="许可证照片：" class="label"><img :src="formatImage(shop.industry.foodUrl)" alt=""></el-form-item>
                <el-form-item label="法定代表人：" class="label">{{shop.industry.legal}}</el-form-item>
                <el-form-item label="许可证地址：" class="label">{{shop.industry.licenseAddress}}</el-form-item>
                <el-form-item label="许可证编号：" class="label">{{shop.industry.licenseNumber}}</el-form-item>
                <el-form-item label="证件单位名称：" class="label">{{shop.industry.unitName}}</el-form-item>
            </el-form>
            <h3 v-if="shop.settlement">结算信息</h3>
            <el-form label-width="160px" v-if="shop.settlement">
                <el-form-item label="银行卡号：" class="label">{{shop.settlement.bankNumber}}</el-form-item>
                <el-form-item label="所属银行：" class="label">{{shop.settlement.bankHouse}}</el-form-item>
                <el-form-item label="银行所在地：" class="label">{{provinceName}}{{cityName}}</el-form-item>
                <el-form-item label="开户支行：" class="label">{{shop.settlement.openBank}}</el-form-item>
                <el-form-item label="开户人：" class="label">{{shop.settlement.openName}}</el-form-item>
            </el-form>
        </el-row>
    </el-row>
</template>
<script>
	import {getShopInfo, getShopCategoryName} from '@/api/api';
	import {getProvinceById, getCityById,} from '@/api/region';
	import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
	export default {
		components: {ElFormItem},
		data: function() {
			return {
				shop: null,
				shopCategoryLists: [],
				provinceName: '',
				cityName: '',
				zoom: 15,
				mapCenter: [],
				markers: []
			}
		},
		created: function() {
			var shopId = this.$route.query.shopId;
			if (!shopId) {
				this.$message({
					type: 'error',
					message: '店铺查询失败'
				})
				setTimeout(() => {
					this.$router.push('/shopList')
				}, 2500)
				return;
			}
			console.log(shopId);
			this.getShopDetail(shopId);
		},
		methods: {
			getShopDetail: function(shopId) {
				getShopInfo(shopId).then(res => {
					console.log(res);
					this.shop = res;
					if(res.detail.longitude){
						this.mapCenter = [res.detail.longitude, res.detail.latitude];
						this.markers = [{position: [res.detail.longitude, res.detail.latitude],title: res.detail.shopName}]
					}

					this.getProvinceName(res.settlement.provinceId);
					this.getCityName(res.settlement.cityId);
				}).catch(err => {
					console.log(err);
					setTimeout(() => {
						this.$router.push('/shopList')
					}, 2500)
				})
			},
			back: function(){
				this.$router.push('/shopList')
			},
			formatImage: function(url){
				return this.UPLOADURL + url
			},
			formatShopType: function(type){
				switch(type){
					case 'RESERVE':
						return '预定';
					case 'TAKEOUT':
						return '外卖';
					case 'RESERVE_TAKEOUT':
						return '预定加外卖';
					default:
						return '-';
				}
			},
			formatAuditStatus: function(auditType){
				switch(auditType){
					case 'UN_COMMIT':
						return '未提交';
					case 'UN_AUDIT':
						return '未审核';
					case 'IN_THE_REVIEW':
						return '审核中';
					case 'ADOPT':
						return '审核通过';
					case 'UNADOPT':
						return '审核不通过';
				}
			},
			formatSubjectDocument: function(type){
				switch(type){
					case 'BUSINESS_LICENSE':
						return '营业执照';
					case 'LEGAL_PERSON_CERTIFICATE_OF_INSTITUTION':
						return '事业单位法人证书';
					case 'REGISTRATION_CERTIFICATE_OF_PRIVATE_NON_ENTERPRISE_UNITS':
						return '民办非企业单位登记证书';
					case 'SOCIAL_ORGANIZATION_LEGAL_PERSON_REGISTRATION_CERTIFICATE':
						return '社会团体法人登记证书';
					default:
						return '-';
				}
			},
			formatDocumentType: function(type){
				switch(type){
					case 'ID_CARD':
						return '身份证';
					case 'HONG_KONG_AND_MACAO_RESIDENTS_TRAVEL_TO_AND_FROM_THE_MAINLAND':
						return '港澳居民来往内地通行证';
					case 'TAIWAN_COMPATRIOTS_CERTIFICATE':
						return '台胞证';
					case 'PASSPORT':
						return '护照';
					default:
						return '-';
				}
			},
			formatIntelligence: function(type){
				switch(type){
					case 'FOOD_SERVICE_LICENSE':
						return '餐饮服务许可证';
					case 'FOOD_BUSINESS_LICENSE':
						return '食品经营许可证';
					case 'FOOD_CIRCULATION_LICENSE':
						return '食品流通许可证';
					case 'TEMPORARY_PUBLICITY_CARDS_FOR_FOOD_VENDORS':
						return '食品摊贩临时经营公示卡';
					case 'NATIONAL_INDUSTRIAL_PRODUCT_PRODUCTION_LICENSE':
						return '全国工业产品生产许可证';
					case 'CLASSIFICATION_CERTIFICATE_REGISTRATION_CERTIFICATE_FOR_SMALL_AND_MICRO_CATERING':
						return '小微餐饮分级证';
					case 'PERMIT_FOR_FOOD_PRODUCTION_AND_PROCESSING_WORKSHOP':
						return '食品生产加工作坊准许证';
					case 'FOOD_WORKSHOP_PRODUCTION_LICENSE':
						return '食品小作坊生产许可证';
					default:
						return '-';
				}
			},
			getProvinceName: function(provinceId){
				try{
					getProvinceById(provinceId).then(res=>{
						this.provinceName = res.provinceName;
					}).catch(err=>{
						console.log(err)
					})
				} catch(e) {
					console.log(e)
				}
			},
			getCityName: function(cityId){
				try{
					getCityById(cityId).then(res=>{
						this.cityName = res.cityName;
					}).catch(err=>{
						console.log(err)
					})
				} catch(e) {
					console.log(e)
				}
			}
		}
	}
</script>
<style scoped lang="scss">
    .lives-news {
        .title {
            font-size: 12px;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 5px;
            h3 {
                display: inline-block;
                padding: 5px 0;
                margin: 0;
                font-weight: normal;
                color: #23b7e5;
                border-bottom: 1px solid #23b7e5;
            }
        }
        .label-color {
            color: red;
        }
        li{
            margin-top: 10px;
        }
        img{
            width: 100px;
            vertical-align: middle;
            height: auto;
        }
        .settlement{
            margin: 15px 0;
        }
        .el-form-item{
            margin-bottom: 0;
        }
        .el-form-item__label{
            line-height: 32px;
        }
        .big-img{
            width: 100%;
            height: 100%;
        }
        .dialog-footer{
            text-align: center;
            position: relative;
            z-index: 99999;
        }
        .amap-container {
            margin: 30px 0;
            width: 600px;
            height: 300px;
        }
    }
</style>